<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>layui地区四级联动</title>
	<link rel="stylesheet" href="layui.css">
</head>
<body>
	<div class="layui-form" lay-filter="pcas">
		<div class="layui-form-item">
	    <label class="layui-form-label">联动选择框</label>
	    <div class="layui-input-inline">
	      <select name="province" lay-filter="province" id="province">
	        <option value="">请选择省份</option>     
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select name="city" lay-filter="city" id="city">
	        <option value="">请选择城市</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select name="area" lay-filter="area" id="area">
	        <option value="">请选择县/区</option>
	      </select>
	    </div>
	 		<div class="layui-input-inline">
	      <select name="street" lay-filter="street" id="street">
	        <option value="">请选择街道</option>        
	      </select>
	    </div>
	  </div>
	</div>
	
<script src="layui.js"></script>
<script src="pcas-location.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
	/*proVal, cityVal, areaVal, streetVal：传入的值，可以为空*/
	function pcasLocation([proVal, cityVal, areaVal, streetVal]){
		
		let ChinaData = new Location().citys; //中华人民共和国城市数据
		let citys; //选中省份后获得下面的所有地级市数据
		let areas; //选中地级市后获得下面的所有县级市数据
		let streets; //选中县级市后获得下面的所有街镇数据

		/** 默认加载省份地区 **/
		function loadProvince(arr){
			let str = "";
			arr.forEach(function(e,i,arr){
				str += `			 
				      <option value="${e.name}">${e.name}</option>
				       `;
			})
			$("#province").append(str);
		}
		/*查找对象中是否有children属性*/
		function findChildren(obj){
			for(var name in obj){
				if(obj.hasOwnProperty("children")){
					return true;
				}else{
					return false;
				}
			}
		}
		/*根据name和子级全部数据,获得选中的完整数据*/
		function getData(str,arr){
			let data;
			arr.forEach(function(e,i,arr){
				if(e.name == str){
					data = e;
				}
			});
			return data;
		}
		/*根据父级数据加载对应的子级数据*/
		function loadHtml(obj){
			let str = "";
			let data = obj.children;
			data.forEach(function(e,i,arr){
					//console.log(e);	
				str += `
						<option value="${e.name}">${e.name}</option>
				       `;
			});
			return {"html":str , "data":data};
		}
		/*主函数*/
		layui.use('form', function(){
		  var form = layui.form;
		  /** 1. 默认加载省份地区 **/
			loadProvince(ChinaData);
			form.render('select');
		  //1. 监听省份的选择
		  form.on('select(province)', function(data){
			  console.log(data.value);

			  let provinceSelect = getData(data.value, ChinaData);
			  $("#area").html(`<option value="">无数据</option>`);
			  $("#street").html(`<option value="">无数据</option>`);
			  if(findChildren(provinceSelect)){
			  	let html = `<option value="">请选择城市</option>` + loadHtml(provinceSelect).html;
			  	$("#city").html(html);form.render('select');
			  	citys = loadHtml(provinceSelect).data;
				}else{
					let html = `<option value="">无城市数据</option>`;
			  	$("#city").html(html);
			  	form.render('select');
				}

			});
		  //2. 监听城市的选择
		  form.on('select(city)', function(data){
			  console.log(data.value);

			  let citySelect = getData(data.value, citys);
			  $("#street").html(`<option value="">无数据</option>`);
			  if(findChildren(citySelect)){
			  	let html = `<option value="">请选择县/区</option>` + loadHtml(citySelect).html;
			  	$("#area").html(html);form.render('select');
			  	areas = loadHtml(citySelect).data;
				}else{
					let html = `<option value="">无县/区数据</option>`;
					$("#area").html(html);
					form.render('select');
				}

			});
			//3. 监听县区的选择
		  form.on('select(area)', function(data){
			  console.log(data.value);

			  let areaSelect = getData(data.value, areas);
			  if(findChildren(areaSelect)){
			  	let html = `<option value="">请选择街道</option>` + loadHtml(areaSelect).html;
			  	$("#street").html(html);form.render('select');
			  	streets = loadHtml(areaSelect).data;
				}else{
					let html = `<option value="">无街道数据</option>`;
					$("#street").html(html);
					form.render('select');
				}

			});
			//4. 监听街道的选择
		  form.on('select(street)', function(data){
			  console.log(data.value);
			});
		});


		//加载默认数据
		if(cityVal == undefined){  //当没有地级市时
			$("#city").html(`<option value="">无数据</option>`);
			$("#area").html(`<option value="">无数据</option>`);
			$("#street").html(`<option value="">无数据</option>`);
			layui.use('form', function(){
	    	var form = layui.form;
				form.val("pcas", {
				  "province" : proVal
				})
			});
		}else{
			if(areaVal == undefined){  //当有地级市没县级市时
				$("#area").html(`<option value="">无数据</option>`);
				$("#street").html(`<option value="">无数据</option>`);

				let provinceSelect = getData(proVal, ChinaData);
		  	let html = `<option value="">请选择城市</option>` + loadHtml(provinceSelect).html;
		  	$("#city").html(html);
		  	citys = loadHtml(provinceSelect).data;
		  	

				layui.use('form', function(){
		    	var form = layui.form;
					form.val("pcas", {
					  "province" : proVal,
					  "city" : cityVal
					})
				});
			}else{
				if(streetVal == undefined){ //当有地级市有县级市没街道时
					$("#street").html(`<option value="">无数据</option>`);

					let provinceSelect = getData(proVal, ChinaData);
			  	let html1 = `<option value="">请选择城市</option>` + loadHtml(provinceSelect).html;
			  	$("#city").html(html1);
			  	citys = loadHtml(provinceSelect).data;
			  	let citySelect = getData(cityVal, citys);
			  	let html2 = `<option value="">请选择县/区</option>` + loadHtml(citySelect).html;
			  	$("#area").html(html2);
			  	areas = loadHtml(citySelect).data;

					layui.use('form', function(){
			    	var form = layui.form;
						form.val("pcas", {
						  "province" : proVal,
						  "city" : cityVal,
						  "area" : areaVal
						})
					});
				}else{  //当有地级市有县级市有街道时

					let provinceSelect = getData(proVal, ChinaData);
			  	let html1 = `<option value="">请选择城市</option>` + loadHtml(provinceSelect).html;
			  	$("#city").html(html1);
			  	citys = loadHtml(provinceSelect).data;
			  	let citySelect = getData(cityVal, citys);
			  	let html2 = `<option value="">请选择县/区</option>` + loadHtml(citySelect).html;
			  	$("#area").html(html2);
			  	areas = loadHtml(citySelect).data;
			  	let areaSelect = getData(areaVal, areas);
			  	let html3 = `<option value="">请选择街道</option>` + loadHtml(areaSelect).html;
			  	$("#street").html(html3);
			  	streets = loadHtml(areaSelect).data;

					layui.use('form', function(){
			    	var form = layui.form;
						form.val("pcas", {
						  "province" : proVal,
						  "city" : cityVal,
						  "area" : areaVal,
						  "street" : streetVal
						})
					});
				}
			}
		}

	}
	/*测试数据
	 *湖北省 武汉市 汉阳区 五里墩街   
	 *	
	 *澳门特别行政区 花地玛堂区
   *
	 *香港特别行政区 香港岛 南区
	 *
	 * 只需要调用pcasLocation即可，可以传入参数或不传，传入参数代表赋值
	 */
	
	pcasLocation(["湖北省","武汉市","汉阳区","五里墩街"]);


	
	
	
</script>
</body>
</html>